<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽</title>
        <style>
            .btn {
                display: inline-block;
                padding: 5px;
                border: 1px solid #00f;
                margin: 5px;
                background: #55f;
                color: #fff;
                cursor: pointer;
                user-select: none;
            }
        </style>
    </head>
    <div>

        <h3>作用域插槽(scoped slots)</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>
        
        <script>

            const ButtonCounter = {
                template: `<div class="btn" @click="handleClick">
                              <slot :counter="this.value">{{counter}}</slot>
                           </div>`,
                data() {
                    return {
                        value: 0
                    }
                },
                methods: {
                    handleClick() {
                        this.value++;
                    }
                }
            }

            const App = {
                components: {
                    ButtonCounter
                },
                template: `<div class="wrapper">
                              <ButtonCounter v-slot:default="x">
                                我已经把你这个破按钮点击了{{x.counter}}次
                              </ButtonCounter>
                              <ButtonCounter #default="x">
                                这个破按钮已经被点击了{{x.counter}}次
                              </ButtonCounter>
                              <ButtonCounter #="x">
                                点击了{{x.counter}}次
                              </ButtonCounter>
                              <ButtonCounter #="{ counter }">
                                点击了{{counter}}次
                              </ButtonCounter>
                           </div>`
            }
            Vue.createApp(App).mount('#application');
        </script>
    </div>
</html>